// miniprogram/pages/deviceControl/ws2812bLight/index.js
const util = require('../../../libs/util.js')
let colorPickerCtx = {};
let sliderCtx = {};
let that;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    pickColor: null,
    raduis:500,
    roundColor:'red',
    power:false,
    valueWidthOrHerght: 0,
    model:[
      { id:0, title:'自动模式', name:'auto', isChoosed:true },
      { id:1, title:'控制模式', name:'control', isChoosed:false }
    ],
    lights:[
      { id:0, name:'red', title:'红灯', rgb:[255,0,0] , icon_path:'/icon/light_red.png', off_icon_path:'/icon/light_gray.png' ,isChecked:false },
      { id:1, name:'yellow', title:'黄灯', rgb:[255,255,0] ,icon_path:'/icon/light_yellow.png',off_icon_path:'/icon/light_gray.png' ,isChecked:false },
      { id:2, name:'purple', title:'紫灯', rgb:[225,0,255] , icon_path:'/icon/light_purple.png',off_icon_path:'/icon/light_gray.png',
      isChecked:false }
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    that = this;
    // wx.setNavigationBarColor({
    //   backgroundColor: '#f4ea2a',
    //   frontColor: '#000000',
    // });
    colorPickerCtx = wx.createCanvasContext('colorPicker');
    colorPickerCtx.fillStyle = 'rgb(255, 255, 255)';
    sliderCtx = wx.createCanvasContext('colorPickerSlider');

    let isInit = true;
    wx.createSelectorQuery().select('#colorPicker').boundingClientRect(function(rect) {
      that.setData({
        valueWidthOrHerght: rect.width,
      })
      if(isInit){
        colorPickerCtx.fillRect(0, 0, rect.width, rect.height);
        util.drawRing(colorPickerCtx, rect.width, rect.height);
        // 设置默认位置
        util.drawSlider(sliderCtx, rect.width, rect.height, 1.0);
        isInit = false;
      }
      that.setData({
        pickColor: JSON.stringify({
          red: 255,
          green: 0,
          blue: 0
        })
      })
    }).exec();
  
    wx.setNavigationBarTitle({
      title: '七彩ws812b灯',
    })
  },
  onSlide: function(e) {
    let that = this;
    if (e.touches ) {
      let x = e.changedTouches[0].x;
      let y = e.changedTouches[0].y;
      if (e.type !== 'touchend') {
        x = e.touches[0].x;
        y = e.touches[0].y;
      }
      //复制画布上指定矩形的像素数据
      wx.canvasGetImageData({
        canvasId: "colorPicker",
        x: x,
        y: y,
        width: 1,
        height: 1,
        success(res) {
          // 转换成hsl格式，获取旋转角度
          let h = util.rgb2hsl(res.data[0], res.data[1], res.data[2]);
          that.setData({
            pickColor: JSON.stringify({
              red: res.data[0],
              green: res.data[1],
              blue: res.data[2]
            })
          })
          // 判断是否在圈内
          if (h[1] !== 1.0) {
            return;
          }
          util.drawSlider(sliderCtx, that.data.valueWidthOrHerght, that.data.valueWidthOrHerght, h[0]);
          // 设置设备
          if (e.type !== 'touchEnd') {
            // 触摸结束才设置设备属性
            return;
          }
        }
      });
    }
  },

  //选择模式
  chooseModel:function(e){
    let model = that.data.model;
    console.log(e);
    model.map(v=>{
      if(v.id === e.currentTarget.dataset.id){
        v.isChoosed = true;
      }
      else if(v.id !== e.currentTarget.dataset.id){
        v.isChoosed = false;
      }
    })
    that.setData({ model:model })
  },

  //点击按钮改变颜色
  changeColor:function(e){
    let that = this;
    let h ;
    let { lights,power } = that.data;
    if(!power){
      console.log('开关未打开！');
      return;
    }
    lights.map(v  => {
      if(v.id === e.currentTarget.dataset.id){
        v.isChecked = true;
        h = util.rgb2hsl(v.rgb[0], v.rgb[1], v.rgb[2]);
        that.setData({
          pickColor: JSON.stringify({
            red: v.rgb[0],
            green: v.rgb[1],
            blue: v.rgb[2]
          })
        })
        // that.setData({ roundColor:v.name })
      }
      if(v.id !== e.currentTarget.dataset.id){
        v.isChecked = false;
      }
    })
    that.setData({ lights:lights });
    util.drawSlider(sliderCtx, that.data.valueWidthOrHerght, that.data.valueWidthOrHerght, h[0]);
    // this.setData({
    //   pickColor: JSON.stringify({
    //     red: 0,
    //     green: 0,
    //     blue: 255
    //   })
    // })

  },

  // 开关按钮
  switchPower:function(){
    let that = this;
    let { power,lights } = that.data;   
    power = !power;
    if(power == false){
       lights.map(v =>{
        v.isChecked = false
      });
    }
    that.setData({ power:power,lights:lights }) 
  },

  // onSlide:function(e){
  //   console.log(e);
  // },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})